<template>
   <div class="step">
        <span class="cicle" :class="{ downcicle: index > id-1 }">{{id}}</span>
      <span class="text" :class="{ downtext: index > id-1 }">{{name}}</span>
   </div>
</template>

<script>
export default {
  props: {
    index: {
      require: Number
    },
    id: {
      require: Number
    },
    name: {
      require: String
    }
  }

}
</script>

<style lang="scss" scoped>
.step{
    // display: inline-block;
    display: inline-block;
    .cicle {
    display: inline-block;
    width: 38px;
    height: 38px;
    opacity: 1;
    border: 2px solid #cccccc;
    border-radius: 50%;
    line-height: 34px;
    margin-right: 6px;
    text-align: center;
  }
  .text {
    vertical-align: middle;
    margin-right: 12px;
  }
  .downcicle {
     display: inline-block;
    width: 38px;
    height: 38px;
    opacity: 1;
    background: #304eec;
    border-radius: 50%;
    color: #fff;
    border: none;
    line-height: 38px;
  }
  .downtext {
    color: #304eec;
  }
}

</style>
